<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Convert HTML to React components</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font: normal 20px monospace;
      background: #fafafa;
    }

    a {
      color: #00D8FF;
    }

    pre {
      font-size: 16px;
      padding: 10px;
      margin: 0;
      border-radius: 4px;
      background: #eee;
    }

    code {
      background: #eee;
      border-radius: 2px;
      padding: 0 4px;
      font-size: 0.8em;
    }

    .header {
      text-align: center;
    }

    .main {
      max-width: 950px;
      margin: 20px auto 0;
    }

    .oneline {
      margin: 20px auto;
      word-wrap: break-word;
    }

    .code {
      display: flex;
      justify-content: center;
      margin: 0 0 60px;
    }

    .code pre {
      flex: 1;
      overflow: scroll;
    }

    .arrow {
      display: flex;
      flex: 1;
      max-width: 20px;
      margin: 0 10px;
      align-items: center;
      font-family: sans-serif;
    }

    .arrow::before {
      content: '→';
      display: block;
      position: relative;
    }

    .footer {
      text-align: center;
      margin: 50px 0 0;
    }

    .footer p {
      margin: 0;
    }

    @media screen and (max-width: 700px) {

      .code {
        flex-direction: column;
      }

      .arrow {
        max-width: initial;
        margin: 5px 0;
        justify-content: center;
      }

      .arrow::before {
        content: '↓';
      }
    }
  </style>
  <style>
    .hljs {
      display: block;
      padding: 0.5em;
    }

    .hljs {
      color: #444
    }

    .hljs-string{
      color: #880000
    }

    .hljs-comment {
      color: #888888
    }
    .hljs-meta {
        color: #2B6EA1
    }
  </style>
</head>

<body>

  <header class="header">

    <div>
      <img src="./imgs/w2v.png">
    </div>
    
    <a class="github-button" href="https://github.com/tnfe/wp2vite" data-icon="octicon-star" data-count-href="/tnfe/wp2vite/stargazers"
      data-count-api="/repos/tnfe/wp2vite#stargazers_count" data-count-aria-label="# stargazers on GitHub"
      aria-label="Star tnfe/wp2vite on GitHub">Star</a>

  </header>

  <main class="main">

    <pre class="oneline">$ npm i -g wp2vite</pre>
    <pre class="oneline">$ cd your_workspace/your_project</pre>
    <pre class="oneline">$ wp2vite</pre>
    <pre class="oneline">$ npm install</pre>
    <pre class="oneline">$ npm run vite-start</pre>

    <div class="code">

      <pre><code class="html hljs xml">
<span class="hljs-comment">&lt;!-- old project menu --&gt;</span>
<span class="hljs-tag">build</span>
<span class="hljs-tag">config</span>
<span class="hljs-tag">docs</span>
<span class="hljs-tag">node_modules</span>
<span class="hljs-tag">public</span>
<span class="hljs-tag">src</span>
    <span class="hljs-tag">components</span>
    <span class="hljs-tag">pages</span>
    <span class="hljs-tag">App.tsx</span>
    <span class="hljs-tag">main.js</span>
    <span class="hljs-tag">setupProxy.js</span>
<span class="hljs-tag">.eslintignore</span>
<span class="hljs-tag">.eslintrc.js</span>
<span class="hljs-tag">.gitignore</span>
<span class="hljs-tag">jest.config.js</span>
<span class="hljs-tag">package.json</span>
<span class="hljs-tag">package-lock.json</span>
<span class="hljs-tag">README.md</span>
<span class="hljs-tag">tsconfig.json</span>
      </code>
      </pre>

      <div class="arrow"></div>

      <pre><code class="javascript hljs">
<span class="hljs-comment">&lt;!-- new project menu --&gt;</span>
<span class="hljs-tag">build</span>
<span class="hljs-tag">config</span>
<span class="hljs-tag">docs</span>
<span class="hljs-tag">node_modules</span>
<span class="hljs-tag">public</span>
<span class="hljs-tag">src</span>
    <span class="hljs-tag">components</span>
    <span class="hljs-tag">pages</span>
    <span class="hljs-tag">App.tsx</span>
    <span class="hljs-tag">main.js</span>
    <span class="hljs-tag">setupProxy.js</span>
<span class="hljs-tag">.eslintignore</span>
<span class="hljs-tag">.eslintrc.js</span>
<span class="hljs-tag">.gitignore</span>
<span class="hljs-tag hljs-string">index.html</span>
<span class="hljs-tag">jest.config.js</span>
<span class="hljs-tag hljs-meta">package.json</span>
<span class="hljs-tag hljs-meta">package-lock.json</span>
<span class="hljs-tag">README.md</span>
<span class="hljs-tag">tsconfig.json</span>
<span class="hljs-tag hljs-string">vite.config.js</span>
      </code></pre>
    </div>

    <p>A front-end project automatic conversion tool, You can make your webpack project support vite.</p>

    <p>wp2vite will not delete your webpack configuration, but will inject vite configuration into your project to support vite.</p>

    <p>The development speed is about 80% faster than that of webpack, and the construction speed is about 50% faster than that of webpack.</p>
    <p>
      <a href="https://github.com/tnfe/wp2vite#options">Read API and CLI build options reference</a>
    </p>

  </main>

  <footer class="footer">
    <p>
      <small>MIT License</small>
    </p>
  </footer>

  <a href="https://github.com/tnfe/wp2vite" title="Fork me on GitHub" class="github-corner">
    <svg width="50" height="50" viewBox="0 0 250 250">
      <title>Fork me on GitHub</title>
      <path d="M0 0h250v250"></path>
      <path d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor"
        style="transform-origin:130px 110px" class="octo-arm"></path>
      <path d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z"
        fill="currentColor" class="octo-body"></path>
    </svg>
    <style>
      .github-corner svg {
        position: absolute;
        left: 0;
        top: 0;
        transform: scale(-1, 1);
        mix-blend-mode: darken;
        color: #ffffff;
        fill: #060307;
      }

      .github-corner:hover .octo-arm {
        animation: octocat-wave .56s;
      }

      @keyframes octocat-wave {
        0%,
        100% {
          transform: rotate(0);
        }
        20%,
        60% {
          transform: rotate(-20deg);
        }
        40%,
        80% {
          transform: rotate(10deg);
        }
      }
    </style>
  </a>

  <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

</body>

</html>
